import React from 'react'
// ===================================================================== Temp
const $ = {
	xy : function(e){
		return {
			x: e.pageX || e.x || e.screenX || e.clientX,
			y: e.pageY || e.y || e.screenY || e.clientY
		}
	},
	getInfo : function (s) {	
		let offsetTop = s.offsetTop
		let offsetLeft = s.offsetLeft
		let parent = s.offsetParent
		while(parent){
			offsetTop += parent.offsetTop
			offsetLeft += parent.offsetLeft
			parent = parent.offsetParent
		}
		return {
			offsetLeft,									// 元素左端距离窗口左端的距离
			offsetTop,									// 元素顶部距离窗口顶部的距离
			offsetRight 		: s.offsetWidth + offsetLeft,		// 元素右端距离窗口左端的距离
			offsetBottom 	: s.offsetHeight + offsetTop,	// 元素底部距离窗口顶部的距离
			offsetWidth 		: s.offsetWidth, 				// 有边框宽度
			offsetHeight		: s.offsetHeight,				// 有边框高度
			clientWidth 		: s.clientWidth, 				// 无边框宽度
			clientHeight		: s.clientHeight,				// 无边框高度
			scrollWidth 		: s.scrollWidth,				// 横向滚动宽度
			scrollHeight		: s.scrollHeight,				// 纵向滚动高度
			scrollLeft 		: s.scrollLeft,					// 横向滚动距离
			scrollTop 		: s.scrollTop,					// 纵向滚动距离
			posTop 			: s.offsetTop,					// 向上相对偏移距离
			posLeft 			: s.offsetLeft,					// 向左相对偏移距离
			left				: parseInt(s.style.left),			// 左定位
			top 				: parseInt(s.style.top),			// 上定位
		}
	}
}
// ===================================================================== component
class Index extends React.Component{
	state = {
		
	}
	
	model = {}
	
	mousemove = e => {
		const { x, y } = $.xy(e)
		if(this.node){
			this.node.style.left = parseInt(x - this.startX) + 'px'
			this.node.style.top = parseInt(y - this.startY) + 'px'
		}
	}
	
	boxmove = e => {
		const { x, y } = $.xy(e)
		if(this.boxNode && this.box){
			const { offsetLeft, offsetTop, clientWidth, clientHeight} = $.getInfo(this.box)
			this.boxNode.style.left = parseInt(x - this.startX - offsetLeft) + 'px'
			this.boxNode.style.top = parseInt(y - this.startY - offsetTop) + 'px'
			if(parseInt(this.boxNode.style.left) <= 0){ this.boxNode.style.left = 0 }
			if(parseInt(this.boxNode.style.left) >= clientWidth - this.size ){ this.boxNode.style.left = clientWidth - this.size + 'px' }
			if(parseInt(this.boxNode.style.top) <= 0){ this.boxNode.style.top = 0}
			if(parseInt(this.boxNode.style.top) >= clientHeight - this.size ){ this.boxNode.style.top = clientHeight - this.size + 'px' }
		}
	}
	
	setValue = data => {
		data.forEach(v=>{
			const node = this.drag.cloneNode()
			node.style.left = v.left
			node.style.top = v.top
			node.style.position = 'absolute'
			node.className = 'label'
			this.box.appendChild(node)
		})
	}
	
	componentDidMount(){
		const $drag = this.drag
		const $box = this.box
		this.size = this.drag.clientWidth
		// 回显
		// this.setValue([{left: "175px",top: "35px"}])
		// 添加元素
		$drag.addEventListener('mousedown',e => {
			const { x, y } = $.xy(e)
			this.node = $drag.cloneNode()
			const { offsetLeft, offsetTop } = $.getInfo($drag)
			this.startX = x - offsetLeft
			this.startY = y - offsetTop
			this.node.style.position = 'absolute'
			this.node.style.left = offsetLeft + 'px'
			this.node.style.top = offsetTop + 'px'
			this.node.style.zIndex = 2000
			this.node.className = 'label'
			
			document.body.appendChild(this.node)
			
			document.body.addEventListener('mousemove',this.mousemove)
		})
		document.body.addEventListener('mouseup', e => {
			if(this.node){
				const left = parseInt(this.node.style.left)
				const top = parseInt(this.node.style.top)
				const { offsetLeft, offsetTop, offsetRight, offsetBottom } = $.getInfo($box)
				if(left > offsetLeft && left < offsetRight - this.size && top > offsetTop && top < offsetBottom - this.size ){
					this.node.style.left = parseInt(this.node.style.left) - offsetLeft + 'px'
					this.node.style.top = parseInt(this.node.style.top) - offsetTop + 'px'
					$box.appendChild(this.node)
				}else{
					this.node.remove()
				}
				this.node = null
			}
			document.body.removeEventListener('mousemove', this.mousemove)
		})
		// 移动元素
		window.addEventListener('mousedown', e => {
			this.boxNode = e.target
			if(this.boxNode && this.boxNode.className === 'label'){
				const { x, y } = $.xy(e)
				const { offsetLeft, offsetTop } = $.getInfo(this.boxNode)
				this.startX = x - offsetLeft
				this.startY = y - offsetTop
				window.addEventListener('mousemove',this.boxmove)
			}else{
				this.boxNode = null
				window.removeEventListener('mousemove', this.boxmove)
			}
		})
		window.addEventListener('mouseup', e => {
			window.removeEventListener('mousemove', this.boxmove)
		})
	}
	
	getData = () => {
		return [ ].slice.call( this.box.children ).map((v,i)=>{
			return {
				left: v.style.left,
				top: v.style.top
			}
		})
	}

	render(){
		return (
			<div className='fx ex mb10'>
				<div className='bor1 ex rel' ref={ref=>this.box=ref}></div>
				<div className='ml10'>
					<div ref={ref=>this.drag=ref} style={{width:80,height:80,background:'#ccc'}}></div>
				</div>
			</div>
		)
	}
}

export default Index